<!-- 策略测试 -->
<template>
	<div class="container">
		<el-row :gutter="10" class="mb8">
			<el-input v-model="query.testingName" placeholder="请输入名称" clearable @clear="handleSearch" size="small" class="handle-input mr10"></el-input>
			<el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button>
			<el-button type="warning" icon="el-icon-download" size="small" @click="unload()">导出</el-button>
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd()">新增</el-button>
			</el-col>
		</el-row>
		<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column type="index" label="ID" align="center"></el-table-column>
			<el-table-column prop="testing_name" label="测试名称" sortable align="center" min-width="100"></el-table-column>
			<el-table-column prop="state" label="状态" sortable align="center" min-width="100" >
				<template #default="scope">
					<p v-if="scope.row.state == 1"> 训练中</p>
					<p v-if="scope.row.state == 2"> 已完成</p>
				</template>
			</el-table-column>
			<el-table-column prop="total_trades" label="交易笔数" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.total_trades}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="total_pl" label="总收益" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.total_pl}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="total_commission" label="手续费" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.total_commission}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="avg_winning_trade" label="平均盈利" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.avg_winning_trade}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="avg_losing_trade" label="平均亏损" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.avg_losing_trade}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="avg_win_duration" label="平均盈利时间" sortable align="center" min-width="140">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.avg_win_duration}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="avg_loss_duration" label="平均亏损时间" sortable align="center" min-width="140">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.avg_loss_duration}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="winning_percent" label="胜率" sortable align="center" min-width="90">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.winning_percent}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="max_consec_win_trade" label="最大连续盈利" sortable align="center" min-width="140">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.max_consec_win_trade}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="max_consec_loss_trade" label="最大连续亏损" sortable align="center" min-width="140">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.max_consec_loss_trade}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="max_drawdown" label="最大回撤" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.max_drawdown}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column prop="sharpe_ratio" label="夏普比率" sortable align="center" min-width="100">
				<template #default="scope">
					<p v-if="scope.row.test_result">{{scope.row.test_result.sharpe_ratio}}</p>
					<p v-else>暂无数据</p>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200" fixed="right">
				<template #default="scope">
					<el-button type="text" icon="el-icon-view" class="red1" @click="handleDetail(scope.row)">详情</el-button>
					<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row.testing_id)">删除</el-button>
					<el-button type="text" icon="el-icon-tickets" class="red2" @click="handleReport(scope.row.testing_id)">测试报告</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				v-if="paginationShow"
				background
				layout="total,sizes,prev,pager,next"
				:current-page="query.pageIndex"
				:page-size="query.pageSize"
				:total="pageTotal"
				@current-change="handlePageChange"
				@size-change="handleSizeChange"
				:page-sizes="[10, 20, 50, 100]"
			></el-pagination>
		</div>
		<!-- 添加 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="40%" :close-on-click-modal="false">
			<editPoput @closeDialog="editPopupDialog" :Infoitem="Infoitem" v-if="editVisible"></editPoput>
		</el-dialog>
		<!-- 测试报告 -->
		<el-dialog title="测试报告" :visible.sync="reportVisible" width="70%" :close-on-click-modal="false">
			<reportList @closeDialog="reportPopupDialog" :Infoitem="Infoitem" v-if="reportVisible"></reportList>
		</el-dialog>
		<!-- 详情 -->
		<el-dialog title="详情" :visible.sync="detailVisible" width="50%" :close-on-click-modal="false">
			<detail @closeDialog="detailPopupDialog" :Infoitem="Infoitem" v-if="detailVisible"></detail>
		</el-dialog>
	</div>
</template>

<script>
import {strategytestListAPI,strategytestDelAPI} from '@/api/index';
import editPoput from "./editStrategyTester.vue"
import reportList from "./reportList.vue"
import detail from './detail.vue'
export default {
	name: 'ClassIndex',
	components:{editPoput,reportList,detail},
	data() {
	    return {
			loading:false,
			tableData:[],
			pageTotal:0,
	        query:{
	            pageNum: 1,
	            pageSize: 10,
				testingName:''
	        },
			title:'',
			editVisible:false,
			reportVisible:false,
			detailVisible:false,
			paginationShow:true
	    };
	},
	mounted() {
		this.getData();
	},
	methods:{
		// 获取表格数据
		getData(){
			this.loading = true;
			strategytestListAPI(this.query).then(res => {
				// console.log(res)
				if (res.status == 200) {
					this.tableData = res.data;
					this.pageTotal = res.total;
					this.loading = false;
				}
			});
		},
		// 导出策略测试
		unload(){
			window.location.href = '/api/index.php/Home/Index/downstrategytest'
		},
		// 添加
		handleAdd(){
			this.title = '新增策略测试'
			this.editVisible = true
			this.Infoitem = {}
		},
		editPopupDialog(){
			this.editVisible = false
			this.getData()
		},
		// 查询
		handleSearch(){
			this.query.pageNum = 1;
			this.getData();
		},
		// 分页导航
		handlePageChange(val){
			this.query.pageNum = val;
			this.getData();
		},
		handleSizeChange(val){
			this.query.pageNum = 1
			this.query.pageSize = val;
			this.getData()
		},
		// 测试报告
		handleReport(data){
			this.reportVisible = true
			this.Infoitem = data
		},
		reportPopupDialog(){
			this.reportVisible = false
			this.getData()
		},
		// 详情
		handleDetail(data){
			this.detailVisible = true
			this.Infoitem = data
		},
		detailPopupDialog(){
			this.detailVisible = false
			this.getData()
		},
		// 删除
		handleDelete(data){
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				var parems = { testingId: data };
				strategytestDelAPI(parems).then(res => {
					if (res.status == 200) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			})
			.catch(() => {});
		}
	}
};
</script>

<style scoped>
.mb8 {
	margin-bottom: 10px;
}
.handle-box {
	margin-bottom: 20px;
}
.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 13px;
}
.red {
	color: #F56C6C;
}
.red2{
	color: #E6A23C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>


